<template>
    <div class="photoinfo-container">
        <h3>{{photoinfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间:{{photoinfo.add_time}}</span>
            <span>点击次数:{{photoinfo.click}}</span>
        </p>
        <hr>
    <div class="thumbs">
        <img  class="preview-img" v-for="(item,index) in list"  @click="$preview.open(index,list)"  :src="item.src" height="100"  :key="item.id">
</div>
        <div class="content" >
            {{photoinfo.content}}
        </div>
         <comment-box :id="this.id"></comment-box>
    </div>
</template>

<script>
import comment from "../subcomponents/Comment.vue"
export default {
  data() {
    return {
      id: this.$route.params.id,
      photoinfo: {},
      list:[]
    };
  },
  created() {
    this.getPhotoInfo();
    this.getPhoneList();
  },
  methods: {
    getPhotoInfo() {
      this.photoinfo = {
        id: 14,
        title: "青春活力的公寓设计",
        click: 2,
        add_time: "2012-12-12 12:12:12",
        content: "我爱你中国我爱你中国我爱你中国我爱你中国我爱你中国我爱你中国我爱你中国我爱你中国我爱你中国我爱你中国"
      };
      this.$http
        .get("https://www.baidu.com/?tn=62095104_7_oem_dg")
        .then(result => {
          console.log(result);
        });
    },
    getPhoneList(){
     this.list =[{image:"http://fuss10.elemecdn.com/3/1e/42634e29812e6594c98a89e922c60jpeg.jpeg",w:600,h:400},{image:"http://fuss10.elemecdn.com/1/c5/95c37272d3e554317dcec1e17a9f5jpeg.jpeg",w:600,h:400},{image:"http://fuss10.elemecdn.com/3/1e/42634e29812e6594c98a89e922c60jpeg.jpeg",w:600,h:400},{image:"http://fuss10.elemecdn.com/1/c5/95c37272d3e554317dcec1e17a9f5jpeg.jpeg",w:600,h:400}]
      this.$http
        .get("https://www.baidu.com/?tn=62095104_7_oem_dg")
        .then(result => {
          console.log(result);
        });
    }

  },
  components:{
      'comment-box':comment
  }
};
</script>

<style lang="scss" scoped>
.photoinfo-container{
    padding: 3px;
    background-color: #fff;
    h3{
        color: #26a2ff;
        font-size: 15px;
        text-align: center;
        margin: 15px 0;
    }
    .subtitle{
        display: flex;
        justify-content: space-between;
        font-size: 13px;
    }
    .content{
        font-size: 13px;
        line-height: 30px;
    }
}
.thumbs{
    img{ 
        margin: 10px;
        box-shadow: 0 0 8px #999;
    }

}
</style>
